<template>
  <div class="">
    <div class="module-card">
      <h3>题目描述：</h3>
      <div>{{ title }}</div>
    </div>
    <div class="module-card">
      <h3>题目要求：</h3>
      <div
        :class="{ 'margin-top': index !== 0 }"
        v-for="(item, index) in detail"
        :key="index"
      >
        <div class="">{{ item.des }}</div>
        <div v-if="item.example" class="">{{ item.example }}</div>
      </div>
    </div>
    <div class="module-card">
      <input v-model="valueStr" @change="handleChange" />
      <div class="margin-top">结果是：</div>
      <div>{{ resultInfo }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      title: ``,
      detail: [
        {
          des: '输入描述',
          example: '',
        },
        {
          des: '输出描述',
          example: '',
        },
      ],
      valueStr: '5 3 1 2 3', // 输入值
      resultInfo: '',
    };
  },
  created() {},
  mounted() {
    this.handleChange();
  },
  beforeDestroy() {},
  computed: {},
  watch: {},
  methods: {
    handleChange() {},
    sumB(...rest) {
      const args = [...rest];
      let sumT = 0;
      const newArr = args.map((v) => {
        if (typeof v === 'boolean') {
          return Number(v);
        }
        if (typeof v === 'number') {
          return v;
        }
        if (typeof v === 'string' && /[A-Za-z]/.test(v)) {
          return 1;
        }
        return 0;
      });
      sumT = newArr.reduce((sum, cur) => {
        sum = (sum * 10 + cur * 10) / 10;
        return sum;
      }, 0);
      console.log(sumT, newArr);
    },
    // sumB('1.0', false, 1, true, 1, 'A', '1', 'B', 1, 'C', 1, 'D', 1)
    // sumB(0.1, 0.2)
    // sumB(5, null, -5)
  },
};
</script>

<style lang="less"></style>

<style lang="less" scoped>
.module-card {
  > h3 {
    font-weight: bolder;
  }
}
.margin-top {
  margin-top: 20px;
}
</style>
